<template>
    <div id="orders">
        <div id="searchBox">
            <el-select v-model="value" placeholder="类型">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                >
                </el-option>
            </el-select>
            <el-input v-model="input" placeholder="请输入查询的租户"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="toSearch()"
                >搜索</el-button
            >
            {{ value }}{{ input }}
        </div>
        <el-table :data="orders" style="width: 100%">
            <el-table-column prop="tenantsId.name" label="租客">
            </el-table-column>
            <el-table-column
                prop="parkingsId.lessorsId.account"
                label="出租人账号"
                width="180"
            >
            </el-table-column>
            <el-table-column
                prop="parkingsId.number"
                label="车位号"
                width="180"
            >
            </el-table-column>
            <el-table-column prop="parkingsId.price" label="价格" width="180">
            </el-table-column>
            <el-table-column prop="endTime" label="支付时间"> </el-table-column>
            <el-table-column prop="backTime" label="归还时间/取消时间">
            </el-table-column>
            <el-table-column label="状态" width="180">
                <template slot-scope="scope">
                    <div v-if="scope.row.state == '1'">未支付</div>
                    <div v-if="scope.row.state == '2'">已支付</div>
                    <div type="info" v-if="scope.row.state == '3'">已取消</div>
                </template>
            </el-table-column>
            <el-table-column label="删除订单" width="180">
                <template slot-scope="scope">
                    <el-button type="danger" @click="isDelete(scope.row._id)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <!--         <div id="page" style="margin-top: 100px">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="dataPage.currentPage - '0'"
                :page-sizes="[1, 3, 5, 7, 11]"
                :page-size="dataPage.pageSize"
                layout="total, sizes, prev, pager, next,jumper"
                :total="dataPage.total"
            >
            </el-pagination>
        </div> -->
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const {
    mapState,
    mapMutations,
    mapGetters,
    mapActions,
} = createNamespacedHelpers("adminOrders");
export default {
    mounted() {
        this.getOrders(this.dataPage);
    },
    data() {
        return {
            options: [
                {
                    value: "name",
                    label: "租客",
                },
                {
                    value: "account",
                    label: "出租人账号",
                },
                {
                    value: "number",
                    label: "车位号",
                },
            ],
            input: "",
            value: "",
        };
    },
    methods: {
        ...mapMutations(["setPageData", "setCurrentPage", "setPageSize"]),
        ...mapActions(["getOrders"]),
        handleSizeChange(val) {
            this.setPageSize(val);
            this.getOrders(this.dataPage);
        },
        handleCurrentChange(val) {
            this.setCurrentPage(val);
            this.getOrders(this.dataPage);
        },
        isDelete(id) {
            this.dataPage.isDelete = true;
            this.dataPage._id = id;
            this.getOrders(this.dataPage);
        },
        toSearch() {
            this.dataPage.input = this.input;
            this.dataPage.value = this.value;
            this.getOrders(this.dataPage);
        },
    },
    computed: {
        ...mapState(["orders", "dataPage"]),
    },
    watch: {
        "dataPage.pageSize": {
            handler(newName, oldName) {
                this.getOrders(this.dataPage);
            },
        },
        "dataPage.currentPage": {
            handler(newName, oldName) {
                this.getOrders(this.dataPage);
            },
        },
    },
};
</script>

<style lang='scss'>
#orders {
    #searchBox {
        .el-select {
            width: 100px;
            .el-input {
                width: 100px;
            }
        }
        .el-input {
            width: 200px;
            input {
                border-right: none;
                border-radius: 0;
                width: 200px;
            }
        }
        .el-button {
            border-left: none;
            border-radius: 0;
        }
    }
    .el-table {
        margin: 50px;
    }
}
</style>